<template>
  <div class="warp">
    <div class="dizhiBox" v-if="!$route.query.addressId">
      <button @click="toAddress">+点击完善收货地址</button>
    </div>
    <div v-else>
      <p>{{address}}</p>
    </div>

    <div class="goods" v-for="item in goods" :key="item.id">
      <p class="p1">
        <span>品牌精选</span>
        <span>领券</span>
        <span>以免运费|</span>
      </p>
      <div class="desc">
        <div class="img">
          <img :src="$pre+item.img" alt />
        </div>
        <div class="info">
          <p>{{item.goodsname}}</p>
          <p>{{item.price}}</p>
          <p>七天无理由退换</p>
        </div>
        <div class="num">{{item.num}}</div>
      </div>
    </div>
    <p class="fapiao">
      <span>发票类型</span>
      <span>不开发票></span>
    </p>
    <p class="shouhou">
      <span>售后免邮</span>
      <span>部分商家赠送</span>
    </p>
    <p>卖家留言 填写内容需要与商家协商并确认,45字以内</p>

    <div class="priceBox">
      <p>
        <span>商品金额</span>
        <span>￥200</span>
      </p>
      <p>
        <span>优惠活动</span>
        <span>-￥200</span>
      </p>
      <p>
        <span>优惠券</span>
        <span>更多优惠券></span>
      </p>
    </div>

    <p class="buy">
      总价:￥{{addPrice}}
      <span @click="confirmOrder">确认订单</span>
    </p>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reqAddressList, reqCar, reqOrderAdd } from "../../http/api";
export default {
  mounted() {
    if (this.$route.query.addressId) {
      reqAddressList({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        id: this.$route.query.addressId,
      }).then((res) => {
        let data = res.data.list[0];
        this.address = data.location + data.useraddress;
        console.log(this.address);
      });
    }

    reqCar({
      uid: JSON.parse(localStorage.getItem("user")).uid,
    }).then((res) => {
      console.log(res);
      this.goods = res.data.list ? res.data.list : [];
      // this.goods = arr.map((item) => {
      //   return item.checked;
      // });
      // console.log(this.goods);
    });
  },
  computed: {
    addPrice() {
      let sum = 0;
      this.goods.forEach((item) => {
        sum += item.num * item.price;
      });
      return sum;
    },
  },
  data() {
    return {
      address: "",
      goods: [],
    };
  },
  methods: {
    toAddress() {
      this.$router.push("/address");
    },
    confirmOrder() {
      reqOrderAdd({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        countmoney: JSON.parse(
          localStorage.getItem("order")
        ).countmoney.toFixed(2),
        countnumber: JSON.parse(localStorage.getItem("order")).countnumber,
        address: this.$route.addressId,
        idstr: JSON.parse(localStorage.getItem("order")).idstr,
      }).then((res) => {
        this.$router.replace("/pay?orderId=" + res.data.list.outTradeNo);
      });
      
    },
  },
};
</script>

<style scoped>
.buy span {
  width: 2rem;
  /* padding: 0.2rem; */
  background: tomato;
  float: right;
  text-align: center;
}
.buy {
  /* padding: 0.2rem; */
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  background: white;
}
.fapiao,
.shouhou,
.priceBox > p {
  display: flex;
  justify-content: space-between;
}
.priceBox {
  background: violet;
  padding-bottom: 1rem;
}
.goods > p,
.priceBox > p {
  font-size: 0.2rem;
  margin-bottom: 0.2rem;
}
.warp {
  background: skyblue;
  font-size: 0.3rem;
}
.warp > div {
  margin-bottom: 0.5rem;
  background: white;
}
.goods .info p {
  font-size: 0.3rem;
  margin-bottom: 0.3rem;
}
.goods .info {
  width: 3rem;
}
.goods .img {
  width: 2rem;
}
.goods .img img {
  width: 100%;
}
.goods .desc p {
  color: tomato;
}
.goods .desc {
  display: flex;
}
.goods .p1 span:nth-child(2) {
  color: tomato;
}
.goods .p1 span:nth-child(2),
.goods .p1 span:nth-child(3) {
  float: right;
}
.goods {
  font-size: 0.4rem;
}
.dizhiBox {
  width: 90%;
  margin: 0 auto;
  height: 2rem;
  background: tomato;
  position: relative;
  border-radius: 0.1rem;
}
button {
  padding: 0.2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.2rem;
  background: orange;
  border: 1px solid tomato;
}
</style>